<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		#game{
			width: 1280px;
			height: 609px;
			background:url(./images/sky.png);
			background-size:100% 100%;
			/*margin:0 auto;*/
			position: relative;
			overflow: hidden;
		}
		#bird{
			width: 34px;
			height: 25px;
			background: url(./images/birds.png) -8px -10px;
			position: absolute;
			top: 200px;
			left: 150px;
		}
	</style>
</head>
<body>
	<div id="game"></div>
	<div id="bird"></div>
	<script>
		// clearInterval(timer);
		var game=document.getElementById('game');
		var birdEle=document.getElementById('bird');
		var sky={
			x:0
		}
		var bird={
			speedX:5,
			speedY:0,
			x:birdEle.offsetLeft,
			y:birdEle.offsetTop
		}
		var running=true;
		


		var timer=setInterval(function(){
			if(running){
				sky.x-=5;
				game.style.backgroundPositionX=sky.x+"px";
				// game.style.backgroundPositionX = sky.x + 'px';
				bird.speedY+=1;
				bird.y+=bird.speedY;
				
				if(bird.y<0){
					// clearInterval(timer);
					running=false;
					// bird.y=0;
					bird.y=3;
					// alert("S了，嫩可真笨！");
					// clearInterval(timer);
					// clearInterval(this.timer);
				}

				if(bird.y+birdEle.offsetHeight>609){
					running=false;
					bird.y=603-birdEle.offsetHeight;
					// alert("S了，嫩可真笨！");
				}

				birdEle.style.top=bird.y+"px";
				}
				
		},30)
		document.onclick=function(){
			bird.speedY=-10;
		}

		//创建管道
		function createPipe(position){
			var pipe={};
			pipe.x=position;
			pipe.uHeight=200+parseInt(Math.random()*100);
			pipe.dHeight=609-pipe.uHeight-200;
			pipe.dTop=pipe.uHeight+200;

			var uPipe=document.createElement("div");
			uPipe.style.width="52px";
			uPipe.style.height=pipe.uHeight+"px";
			uPipe.style.background="url(./images/pipe2.png) bottom";
			uPipe.style.position="absolute";
			uPipe.style.top="0";
			uPipe.style.left=pipe.x+'px';
			game.appendChild(uPipe);


			var dPipe=document.createElement("div");
			dPipe.style.width="52px";
			dPipe.style.height=pipe.dHeight+"px";
			dPipe.style.background="url(./images/pipe1.png)";
			dPipe.style.position="absolute";
			dPipe.style.top=pipe.dTop+"px";
			dPipe.style.left=pipe.x+'px';
			game.appendChild(dPipe);

			//让管道运动起来（定时器+运动原理）
			var timer=setInterval(function(){
				if(running){
					pipe.x-=2;
					uPipe.style.left=pipe.x+"px";
					dPipe.style.left=pipe.x+"px";
					if(pipe.x<-52){
						//管道完全出屏幕时，设置管道从右边出，位置是1000
						pipe.x=1337;//1400-63
					}

					var uCheck=bird.x+34>pipe.x&&bird.x<pipe.x+52&&bird.y<pipe.uHeight;
					var dCheck=bird.x+34>pipe.x&&bird.x<pipe.x+52&&bird.y>pipe.uHeight+	170;
					if(uCheck||dCheck){
						running=false;
						// alert("S了，嫩可真笨！");
					}


				}

				
			},30)




		}
		createPipe(400);
		createPipe(600);
		createPipe(800);
		createPipe(1000);
		createPipe(1200);
		createPipe(1400);
		createPipe(1600);

		// if(running==false){
		// 	clearInterval(timer);
		// 	alert("S了，嫩可真笨！");
		// }
	</script>
</body>
</html>